<template>
  <Dialog v-bind="$attrs" v-on="$listeners">
    <template #headerAppend="{ close }">
      <v-icon @click="close" color="#fff" class="icon">mdi-close</v-icon>
    </template>
    <template>
      <v-card flat min-height="188" class="pt-6 text-left">
        <v-spacer>
          <v-col>
            <v-row no-gutters>
              <v-col :cols="3" :offset="1">Date From</v-col>
              <v-col class="text-left" :cols="9">
                <v-card flat width="33.333%">
                  <picker-input
                    v-model="dateFrom"
                    v-validate="'required'"
                    :max="dateTo"
                    name="Date From"
                    hide-details
                    class="picker-input"
                  ></picker-input>
                </v-card>
              </v-col>
              <span class="vee-validate-error">
                {{ errors.first("Date From") }}
              </span>
            </v-row>
          </v-col>
          <v-col>
            <v-row no-gutters>
              <v-col :cols="3" :offset="1">Date To</v-col>
              <v-col class="text-left" :cols="9">
                <v-card flat width="33.333%">
                  <picker-input
                    v-model="dateTo"
                    v-validate="'required'"
                    name="Date To"
                    :min="dateFrom"
                    hide-details
                    class="picker-input"
                  ></picker-input>
                </v-card>
                <span class="vee-validate-error">
                  {{ errors.first("Date To") }}
                </span>
              </v-col>
            </v-row>
          </v-col>
          <v-col class="text-center">
            <v-btn
              @click="submit"
              fab
              color="#D9D9D9"
              elevation="0"
              height="32"
              width="32"
            >
              <v-icon small color="#556282">mdi-file-send</v-icon>
            </v-btn>
          </v-col>
        </v-spacer>
      </v-card>
    </template>
  </Dialog>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import PickerInput from "@/components/Maintenance/PickerInput/PickerInput.vue";
import { getDate } from "@/common/constants/Utils";
@Component({
  components: {
    Dialog,
    PickerInput,
  },
})
export default class ExportJobDialog extends Vue {
  dateFrom = getDate("-");
  dateTo = getDate("-");
  submit() {
    const date = {
      dateFrom: this.dateFrom,
      dateTo: this.dateTo,
    };
    this.$emit("submit", date);
  }
}
</script>
<style lang="scss" scoped>
@import "./ExportJobDialog.scss";
</style>
